<script setup lang="ts">

import ActiveForm from "@/views/active/form/ActiveForm.vue";
import type {Ref} from "vue-demi";
import {
  type ActiveDetailVo,
  type ActiveDto,
  type ActiveListVo,
  delActive,
  getActiveDetail,
  getActiveIdVo,
  getActiveListVo,
  type Query
} from "@/apis/active";
import {useUserStore} from "@/stores";
import PreActive from "@/views/active/pre/PreActive.vue";
import {getValue, getValueHeader} from "@/apis/active/table/column/value";

const map = {
  0:"结束",
  1:"发布",
  2:"未发布",
  3:"编辑中",
  4:"隐藏"
}

const query:Ref<Query> = ref({
  title: '',
  startDate: '',
  deadlineDate: '',
  addr: '',
  pageNum: 1,
  pageSize: 10,
  total: 0,
})

const visible = ref(false)

const viewVisible = ref(false)

const scroll = ref({
  x: 100,
  y: 700
})

/**
 * 新增
 */
const clickAddHandler = () => {
  activeDTO.value.id = 0
  visible.value = !visible.value
}

/**
 * 修改
 */
const clickUpdateHandler = (data:ActiveListVo) => {
  getActiveIdVo(data.id + "").then(res => {
    Object.assign(activeDTO.value, res.data.data)
    activeDTO.value.activeTrip = JSON.parse(res.data.data.activeTrip)
    activeDTO.value.activeLabel = res.data.data.activeLabel!.split(",")
    visible.value = !visible.value
  })
}

/**
 * 查看活动信息
 * @param data
 */
const clickViewHandler = (data:ActiveListVo) => {
  viewVisible.value =!viewVisible.value
  getActiveDetail(data.id + "").then(res => {
    Object.assign(activeVo.value, res.data.data)
  })

  activeTableValue.value = []

  getValue(data.id + "").then(res => {
    res.data.data.forEach((item:any) => {
      activeTableValue.value.push(JSON.parse(item.value))
    })
  })

  activeTableHeader.value = []

  getValueHeader(data.id + "").then(res => {
    res.data.data.forEach((item:any) => {
      activeTableHeader.value.push({
        title: item.tableColumnLabel,
        dataIndex: item.tableColumnName
      })
    })
  })

}


const clickDelHandler = async (data: string) => {
  await delActive(data)
  query.value.pageNum = 1
  getList()
}

const activeList:Ref<ActiveListVo[]> = ref([])

const activeVo:Ref<ActiveDetailVo> = ref({
  id: 0,
  activeTitle: '',
  activeBegin: '',
  activeEnd: '',
  bannerList: [],
  activeAddr: '',
  activeLabel: '',
  activePrice: 0,
  activeInstance: [],
  activeTrip: '[]',
  guests: [],
  activeRegisterDeadline: '',
  activeTargetGroup: '',
  activeLimit: 0,
  activeRegisteredNum: 0,
  activeForm: []
})
//@ts-ignore
const activeDTO:Ref<ActiveDto> = ref({
  id: 0,
  activeTitle: "",
  activeStartTime: "",
  activeDeadline: "",
  activeAddr: "",
  activeLabel: [],
  activeHeadImg: "",
  activeInstance: "",
  instanceOssIds: "",
  activePrice: 0,
  activeOriginPrice:0,
  activeAim: "",
  activeTrip: [{
    id: new Date().toString(),
    time: "",
    content: "内容",
    order: 1
  }],
  activeTargetGroup: "",
  activeRegisterDeadline: "",
  activeLimit: 1,
  updateBy: useUserStore().userInfo.id,
  status: 0
})

const activeTableValue:Ref<any> = ref([])

const activeTableHeader:Ref<any> = ref([])

/**
 * 初始查询条件
 */
const getList = () => {
  getActiveListVo(query.value).then(res => {
    activeList.value = res.data.data.records
    query.value.total = res.data.data.total
    // query.value.pageNum++
  })
}

const clickSearchHandler = () => {
  query.value.pageNum = 1
  getList()
}

getList()

</script>

<template>
  <div class="back">
    <pre-active v-model:visible="viewVisible" v-model:vo="activeVo" v-model:from-head="activeTableHeader" v-model:value-data="activeTableValue"></pre-active>
    <ActiveForm v-model:visible="visible" :dto="activeDTO" @ok="getList"></ActiveForm>
    <a-space class="box" direction="vertical" >
      <a-row :gutter="10">

        <a-col :span="2">
          <a-input v-model="query.title" placeholder="活动标题"></a-input>
        </a-col>

        <a-col :span="2">
          <a-date-picker v-model="query.startDate" placeholder="活动开始时间"></a-date-picker>
        </a-col>

        <a-col :span="2">
          <a-date-picker v-model="query.deadlineDate" placeholder="活动结束时间"></a-date-picker>
        </a-col>

        <a-col :span="2">
          <a-input v-model="query.addr" placeholder="活动地点"></a-input>
        </a-col>

        <a-col :span="2">
          <a-button type="outline" @click="clickSearchHandler">查询</a-button>
        </a-col>

      </a-row>

      <a-row class="w1200" :gutter="1">
        <a-col :span="1"><a-button status="success" type="outline" @click="clickAddHandler">新增</a-button></a-col>
      </a-row>

    </a-space>

    <a-table :data="activeList"
      :scroll="scroll" :pagination="false"
    >
      <template #columns>
        <a-table-column title="编号" data-index="id"></a-table-column>
        <a-table-column title="活动标题" data-index="activeTitle" ellipsis width="100" />
        <a-table-column title="活动开始时间" data-index="activeStartTime" ></a-table-column>
        <a-table-column title="活动地点" data-index="activeAddr"></a-table-column>
        <a-table-column title="活动当前价格" data-index="activePrice">
          <template #cell="{record}">
            <span>{{record.activePrice}}元</span>
          </template>
        </a-table-column>
        <a-table-column title="活动人数" data-index="activeLimit"></a-table-column>
        <a-table-column title="最后上传者" data-index="updateBy"></a-table-column>
        <a-table-column title="更新时间" data-index="updateTime"  width="200"></a-table-column>
        <a-table-column title="活动状态" data-index="status">
          <template #cell="{record}">
            {{map[record.status]}}
          </template>
        </a-table-column>
        <a-table-column title="操作" >
          <template #cell="{record}">
              <a-button type="text"  @click="clickViewHandler(record)">查看</a-button>
              <a-button type="text" status="success" @click="clickUpdateHandler(record)">修改</a-button>
              <a-button type="text" status="danger" @click="clickDelHandler(record.id)">删除</a-button>
          </template>
        </a-table-column>
      </template>

      <template #footer>
        <a-pagination v-model:current="query.pageNum" v-model:total="query.total"
                      v-model:page-size="query.pageSize" @page-size-change="getList"
                      @change="getList"
                      show-total show-jumper show-page-size/>
      </template>

    </a-table>
  </div>
</template>

<style scoped lang="scss">
.back {
  .box {
    padding: 20px;
    width: 100%;
  }
  margin: 0 auto;
  width: 98%;
  height: 98%;
}
</style>